<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品细分类管理</title>
	<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../static/style/admin.css" media="all">
</head>
<body>

<script type="text/html" id="toolbar">
	<div class="layui-inline ">
		<input type="search" name="search" lay-verify="title" autocomplete="off" placeholder="请输入细分类编号"
			   class="layui-input layui-input-search"  id="select">
	</div>
	<button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="search"><i class="layui-icon layui-icon-search"
																				  style="font-size: 8px; "></i> 搜索
	</button>
	<button class="layui-btn layui-btn-sm layui-btn-radius" lay-event="add"><i class="layui-icon layui-icon-addition"
																			   style="font-size: 8px; "></i>新增
	</button>
</script>

<!--表格-->
<div class="layui-card layui-panel-window">
	<table class="layui-hide" id="categorylist" lay-filter="test"></table>
</div>

<!--行操作栏-->l
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>


<script src="../../../static/layui/layui.js"></script>
<script>

	layui.use(['table', 'element'], function () {
		table = layui.table;
		var $ = layui.$;

		//渲染列表
		table.render({
			elem: '#categorylist',
			height: 'full-50',
			//整合到自己项目中是,您应该使用使用url参数,并且注释掉data参数
			url: '/product/queryProductList', //数据接口,数据格式见 https://www.layui.com/doc/modules/table.html#async
			//data参数只是演示使用,实际项目,请实现上方url数据接口
			title: '商品细分类表表',
			method: 'POST',
			contentType: 'application/json',
			page: true, //开启分页
			toolbar: '#toolbar', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
			cols: [
				[ //表头
					{type: 'checkbox', fixed: 'left'},
					{field: 'id', title: 'ID', sort: true, width: 80, fixed: 'left', align: 'center'},
					{field: 'productlistid', title: '商品细分类编号', align: 'center'},
					{field: 'productclassid', title: '商品总分类编号', align: 'center'},
					{field: 'plName', title: '商品细分类名称', align: 'center'},
					{field: 'employeeid', title: '创建分类员工id', sort: true, align: 'center'},
					{field: 'createDate', title: '建分类时间', sort: true, align: 'center'},
					{field: 'remark', title: '描述备注', align: 'center'},
					{fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo'}
				]
			],
			size: 'lg'
		});

		//监听行工具事件
		table.on('tool(test)', function (obj) {
			//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data //获得当前行数据
				, layEvent = obj.event; //获得 lay-event 对应的值

			if (layEvent === 'del') {
				layer.confirm('你确定要删除吗？', {
					btn: ['确定', '取消'] //按钮
				}, function () {
					// 发送请求删除
					$.ajax({
						url: '/product/deleteProductList',
						type: 'get',
						data: 'id=' + data.id,
						success: function (data) {
							if (data.code === 200) {
								// 删除成功
								layer.msg('删除成功', {icon: 1});
								// 表格重载
								table.reload('categorylist', {});
							} else {
								layer.msg('删除失败', {icon: 2});
							}
						}
					})
				}, function () {
					// 取消
					layer.msg("取消删除", {icon: 7})
				});
			} else if (layEvent === 'edit') {
				//免加载页面弹窗
				Comment(data, "编辑")
			}
		});

		//触发事件
		table.on('toolbar(test)', function (obj) {
			if (obj.event === 'add') {
				var tpldata = {
					"id": "",
					"productlistid": "",
					"plName": "",
					"productclassid": "",
					"remark": "",
				};
				Comment(tpldata, "添加");
			} else if (obj.event === 'search') {
				
				// 获取到搜索框的内容
				let search = $("#select").val();

				console.log(search);

				// 表格重载
				table.reload('categorylist', {
					url: '/product/queryProductList',
					where: {
						'queryString': search
					}
				})
			}
		});
	});


	/**
	 * 编辑和添加功能
	 * @param {Object} user 用户数据
	 * @param features 功能
	 */
	function Comment(user, features) {
		layui.use(['layer', 'laytpl'], function () {
			var $ = layui.$;//重点处,layui有内置jquery模块
			var layer = layui.layer, laytpl = layui.laytpl;
			//给模板 tpl-user 传递参数
			var tpldata = {
				"features": features,
				"id": user.id,
				"productlistid": user.productlistid,
				"productclassid": user.productclassid,
				"plName": user.plName,
				"remark": user.remark,
			};
			//获取id为tpl-user的noscript标签的html内容,不能使用innerHtml
			laytpl(document.getElementById('tpl-user').innerText)
				.render(tpldata, function (html) {
					//渲染完成后直接打开
					layer.open({
						type: 1,
						shade: false,
						area: ['60%', 'auto'],
						title: false, //不显示标题
						content: html,
					});
				});
		});
	}

</script>
</body>

<!--添加和编辑页面-->
<noscript id="tpl-user">
	<!-- style 尽量不要影响到页面其他元素,使用#userinfo范围限定 -->
	<style type="text/css">
		#userinfo .layui-form-label.layui-required:after {
			content: "*";
			color: red;
			position: absolute;
			top: 10px;
			right: 5px;
		}
	</style>
	<div class="layui-card" id="userinfo">
		<div class="layui-card-header">{{d.features}}</div>
		<div class="layui-card-body">
			<form class="layui-form" action="" lay-filter="info">
				
				<div class="layui-form-item">
					<label class="layui-form-label layui-required">商品细分类编号</label>
					<div class="layui-input-block">
						<input type="text" name="productlistid" lay-verify="required" lay-reqtext="商品细分类编号是必填项"
							   placeholder="请输入商品细分类编号"
							   autocomplete="off" value="{{d.productlistid}}" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label layui-required">商品总分类</label>
					<div class="layui-input-block">
						<select name="productclassid" id="productclassid" lay-verify="required">
							<option value="">请选择</option>
						</select>
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label layui-required">商品细分类名称</label>
					<div class="layui-input-block">
						<input type="text" name="plName" lay-verify="required" lay-reqtext="商品细分类名称是必填项"
							   placeholder="请输入商品细分类名称"
							   autocomplete="off" value="{{d.plName}}" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<label class="layui-form-label">描述备注</label>
					<div class="layui-input-block">
						<input type="text" name="remark" lay-verify="required"
							   placeholder="请输入描述备注"
							   autocomplete="off" value="{{d.remark}}" class="layui-input">
					</div>
				</div>
				
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn tt layui-btn-radius" lay-submit="" lay-filter="demo1">
							立即提交
						</button>
						<button type="reset" class="layui-btn layui-btn-primary layui-btn-radius">重置</button>
					</div>
				</div>
			</form>
			<!-- 下方script标签中不能使用单行注释语句,否则laytpl编译解析会报错-->
			<!-- 语句之间也要严格用分号隔开,因为laytpl编译时,那些换行都被去掉了,导致代码连在一起 -->
			<script>
				layui.use(['jquery', 'form'], function () {
					var $ = layui.$,
						form = layui.form,
						layer = layui.layer,
						laydate = layui.laydate;


					form.verify({
						contentRule: function (value) {
							if (value.length < 5) {
								return '标题至少得5个字符啊';
							}
						},
					});
					form.on('submit(demo1)', function (data) {
						/**可以在ajax 地址中,传入user_id参数*/
						console.log(data.field);
						if ("{{d.features}}" === "添加") {
							$.ajax({
								url: '/product/addProductList',
								type: 'POST',
								dataType: 'json',
								contentType: 'application/json;charset=UTF-8',
								data: JSON.stringify(data.field),
								success: function (data) {
									console.log(data);
									if (data.code === 200) {
										layer.msg("添加成功", {icon: 1})
									} else {
										layer.msg("添加失败", {icon: 2})
									}
									layer.closeAll();
								}
							});
						} else {
							data.field['id'] = "{{d.id}}";
							$.ajax({
								url: '/product/editProductList',
								type: 'POST',
								dataType: 'json',
								contentType: 'application/json;charset=UTF-8',
								data: JSON.stringify(data.field),
								success: function (data) {
									console.log(data);
									if (data.code === 200) {
										layer.msg("编辑成功", {icon: 1})
									} else {
										layer.msg("编辑失败", {icon: 2})
									}
									layer.closeAll();
								}
							});
						}
						
					});
					/** 要使用render,复杂表单才能显示 */
					form.render();

					/*渲染商品总分类编号*/
					$(function () {
						$.ajax({
							type: "POST",
							url: "/product/getAllProductClassId",
							success: function (data) {
								if (data.code === 200) {
									$.each(data.data, function (index, item) {
										$("#productclassid").append("<option value='" + item.productclassid + "'>" + item.name + "</option>");
									});
									$("#productclassid").val("{{d.productclassid}}");
								} else {
									layer.msg("查询总分类编号失败");
								}

								layui.form.render("select");
							}, error: function () {
								layer.msg("查询总分类编号失败");
							}
						});
					});
				});
			</script>
		</div>
	</div>
</noscript>
</html>
